<template>
    <div class="page">
      <TopBar title="我的地址"></TopBar>
      <el-button class="btn" @click="addr">新建地址</el-button>
        <div class="geren" v-for="(x,i) in book_info" :key="i" @click="xiugai(x.aid)">
            <div class="name_mobile">
            <div style="width:130px">名字：{{x.name}}</div>
            <div>手机号：{{x.mobile}}</div>
        </div>
        <div>
            详细地址：{{x.detail}}
        </div>
        <div v-if="x.default" style="color:aqua">默认地址</div>
        <br/>
        </div>
        
    </div>
  </template>
  
  <script>
  import TopBar from "@/components/TopBar";
  
  export default {
    name: "InfoView.vue",
    components: {
      TopBar
    },
    data() {
      return {
        id: this.$route.query.id,
        book_info: {},
        aritcle_info: [],
        open_drawer: false,
        comm_context: "",
        parent_id: 0,
        root: 0,
        comm_list: []
      }
    },
    mounted() {
      this.getData()
      this.getCommentData()
    },
    methods: {
      xiugai(id){
        this.$router.push('/modification?id=' + id)
      },
      addr(){
        this.$router.push('/addr')
      },
      buy(){
        if(!localStorage.getItem('token')){
          this.$router.push('/login')
        }
      },
      getData() {
        this.$axios.get("customer/addruser/",{
            headers:{
          'Authorization':localStorage.getItem('token') || ''
        }
        }).then(res => {
          if (res.data.code == 200) {
            this.book_info = res.data.data
            this.aritcle_info = res.data.data.article
          }
        })
      },
      getCommentData() {
        this.$axios.get("/book/comment?book_id=" + this.id).then(res => {
          if (res.data.code == 200) {
            this.comm_list = res.data.data
          }
        })
      },
  
      publish_comm() {
        this.$axios.post("/book/comment", {
          "book_id": this.id,
          "context": this.comm_context,
          "parent_id": this.parent_id,
          "root_id": this.root_id,
        }).then(res => {
          if (res.data.code == 200) {
            this.$success(res.data.msg)
            this.open_drawer = false
            this.comm_context = ""
            this.getCommentData()
          } else {
            this.$error(res.data.msg)
          }
        })
      },
      re_comm(id) {
        this.parent_id = id;
        this.root_id = id;
        this.open_drawer = true
      },
      re_re_comm(parent_id, root_id) {
        this.parent_id = parent_id;
        this.root_id = root_id;
        this.open_drawer = true
      }
    }
  }
  </script>
  <style>
  .geren{
    margin-left: 20px;
  }
  .ivu-tabs-ink-bar {
    background-color: rgb(97, 191, 167) !important;
  }
  
  .ivu-tabs-nav .ivu-tabs-tab-active {
    color: rgb(97, 191, 167) !important;
  }
  </style>
  <style scoped>
  .page {
    background-color: rgb(242, 242, 242);
    min-height: 100vh;
  }
  .btn, .btn:hover {
  background-color:rgb(137, 241, 255);
  border: none;
  margin: 20px 0px 30px;
  height: 40px;
  width: 50%;
  color: #000000;
  border-radius: 20px;
}
  .header {
    padding: 15px;
  }
  
  .img {
    width: 100px;
    height: 150px;
    border-radius: 10px;
  }
  
  .title {
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 6px;
  }
  
  .desc {
    font-size: 14px;
    margin-bottom: 10px;
    overflow: hidden;
    height: 45px;
  }
  
  .btn {
    width: 100%;
  }
  
  .btn1, .btn1:hover {
    background-color: rgb(97, 191, 167);
    color: #FFF;
    border: none;
  }
  
  .menu_item {
    padding: 15px 10px;
    border-bottom: 1px solid #CCC;
  }
  
  .menu_title {
    color: #000;
    font-size: 16px;
    font-weight: bold;
  }
  
  .active {
    color: rgb(97, 191, 167);
  }
  
  .tag_box {
    display: flex;
    justify-content: start;
    margin-top: 10px;
  }
  
  .tag {
    border: 1px solid rgb(97, 191, 167);
    padding: 0 5px;
    border-radius: 6px;
    color: rgb(97, 191, 167);
    margin-right: 10px;
  }
  
  .comment {
    padding: 15px 20px;
    /*border-bottom: 1px solid #DDDDDD;*/
  }
  
  .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
  
  .hot {
    background-color: #FFFFFF;
    border: 1px solid rgb(97, 191, 167);
    color: rgb(97, 191, 167);
  }
  
  .date {
    color: #BBBBBB;
  }
  
  .like {
    text-align: right;
    color: indianred;
    font-size: 18px;
  }
  
  .like span {
    font-size: 14px;
    margin-left: 6px;
    align-items: center;
  }
  
  .re_comm {
    width: 100%;
    color: #999999;
    margin-left: 10px;
    margin-top: 15px;
    border-bottom: 1px solid #DFDFDF;
    position: relative;
  }
  
  .btn_box {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
  }

  .name_mobile{
    display: flex;
  }
  </style>